<!-- 添加商品 -->
<template>
	<view class="AddProduct">
		<!-- 输入部分 -->
		<view class="title font-weight-600 size-32 color3"><text class="color">*</text> 商品信息</view>
		<view class="input f-background radius20">
			<u-form :model="params" :rules="rules" ref="uForm">
				<u-form-item label="商品名称" prop="goodsName" ref="goodsName" labelWidth="162rpx">
					<u--input v-model="params.goodsName" class="size-28 color3" placeholder-class="building-plac"
						type="text" border="none" placeholder="请输入商品名称"></u--input>
				</u-form-item>
				<u-form-item label="商品单价" prop="goodsAmount" ref="goodsAmount" labelWidth="162rpx">
					<u--input v-model="params.goodsAmount" class="size-28 color3" placeholder-class="building-plac"
						type="text" border="none" placeholder="请输入商品单价"></u--input>
				</u-form-item>
				<u-form-item label="商品库存" prop="stock" ref="stock" labelWidth="162rpx">
					<u--input v-model="params.stock" class="size-28 color3" placeholder-class="building-plac"
						type="text" border="none" placeholder="请输入商品库存"></u--input>
				</u-form-item>
				<picker :range="sortList" range-key="name" :value="sortIndex" mode='selector' @change="onSortSelect">
					<u-form-item label="商品分类" prop="goodName" ref="goodName" labelWidth="162rpx">
						<u--input readonly v-model="params.goodName" class="size-28 color3"
							placeholder-class="building-plac" type="text" border="none"
							placeholder="请选择商品分类"></u--input>
						<text slot="right" class="iconfont icon-right-1-copy color9"></text>
					</u-form-item>
				</picker>
				<view class="save poflb width100 inset-bottom f5-background">
					<view class="save-inset dis">
						<u-button type="primary" :disabled="disabled"
							:customStyle="{width: '690rpx',height: '96rpx',borderRadius: '100rpx'}" color="#EB0000"
							@click="onSubmit">
							<text class="color-f font-weight-600 size-34">确定</text>
						</u-button>
					</view>
				</view>
			</u-form>
		</view>
		<view class="title font-weight-600 size-32 color3"><text class="color">*</text> 限购信息</view>
		<view class="limited f-background radius20">
			<view class="limited-controls size-32 dis-ali">
				<view class="controls dis-ali color3" @click="params.isRestrictions = 1">
					<text v-if="params.isRestrictions != 1" class="iconfont icon-danxuanweixuanzhong"></text>
					<text v-else class="iconfont icon-danxuanxuanzhong color"></text>
					<text class="margin-left-16" :class="{'color' : params.isRestrictions == 1}">商品限购</text>
				</view>
				<view class="controls dis-ali color3" @click="params.isRestrictions = 0">
					<text v-if="params.isRestrictions != 0" class="iconfont icon-danxuanweixuanzhong"></text>
					<text v-else class="iconfont icon-danxuanxuanzhong color"></text>
					<text class="margin-left-16" :class="{'color' : params.isRestrictions == 0}">不限购</text>
				</view>
			</view>
			<view class="controls-goods border-top" v-if="params.isRestrictions == 1">
				<view class="controls dis-ali color9" :class="{'color': limitedData.goodsCountLimit == 1}">
					<text @click="onProcessing('goodsCountLimit')" v-if="limitedData.goodsCountLimit != 1"
						class="iconfont icon-xuanze size-36"></text>
					<text @click="onProcessing('goodsCountLimit')" v-else
						class="iconfont icon-xuanzhong color size-36"></text>
					<view class="margin-left-16 dis-ali">
						<text class="size-28" @click="onProcessing('goodsCountLimit')">当前商品限购</text>
						<input v-model="params.goodsCountLimit" class="limited-input color3 size-30"
							placeholder-class="class-xuanze" type="text" placeholder="请输入" />
						<text class="size-28">份商品</text>
					</view>
				</view>
				<view class="controls dis-ali color9" :class="{'color': limitedData.goodsSingle == 1}">
					<text @click="onProcessing('goodsSingle')" v-if="limitedData.goodsSingle != 1"
						class="iconfont icon-xuanze size-36"></text>
					<text @click="onProcessing('goodsSingle')" v-else
						class="iconfont icon-xuanzhong color size-36"></text>
					<view class="margin-left-16 dis-ali">
						<text class="size-28" @click="onProcessing('goodsSingle')">每人每次限购</text>
						<input v-model="params.goodsSingle" class="limited-input color3 size-30"
							placeholder-class="class-xuanze" type="text" placeholder="请输入" />
						<text class="size-28">份商品</text>
					</view>
				</view>
				<view class="controls dis-ali color9" :class="{'color': limitedData.goodsDay == 1}">
					<text @click="onProcessing('goodsDay')" v-if="limitedData.goodsDay != 1"
						class="iconfont icon-xuanze size-36"></text>
					<text @click="onProcessing('goodsDay')" v-else class="iconfont icon-xuanzhong color size-36"></text>
					<view class="margin-left-16 dis-ali">
						<text class="size-28" @click="onProcessing('goodsDay')">每人每天限购</text>
						<input v-model="params.goodsDay" class="limited-input color3 size-30"
							placeholder-class="class-xuanze" type="text" placeholder="请输入" />
						<text class="size-28">份商品</text>
					</view>
				</view>
			</view>
		</view>
		<view class="title font-weight-600 size-32 color3"><text class="color">*</text> 商品图片</view>
		<view class="product-picture f-background radius20">
			<u-upload :fileList="fileList" @afterRead="afterRead" @delete="onDeletePicImg" multiple :maxCount="8">
				<image class="upload-img" :src="`${OnlineStatic}jias.png`" mode=""></image>
			</u-upload>
		</view>
		<view class="inset-bottom"></view>
	</view>
</template>

<script>
	import { OnlineStatic, AddGoodsInfo, GetTeamTeaderGoodsInfo } from "@/api/index"
	import { MultipassUpload } from '@/utils/index';
	export default {
		data() {
			return {
				disabled: false,
				OnlineStatic,
				fileList: [],
				borderErr: false, // 校验失败的时候 才显示边框
				sortIndex: 0, // 商品分类选中的下标
				rules: {
					goodsName: [{
						type: 'string',
						required: true,
						message: '请输入商品名称',
						trigger: ['blur', 'change']
					}, {
						pattern: /^.{2,15}$/,
						transform(value) {
							return String(value);
						},
						message: '输入长度错误，请输入2到15位字符',
						trigger: ['blur', 'change']
					}],
					goodsAmount: [{
						type: 'string',
						required: true,
						message: '请输入商品单价',
						trigger: ['blur', 'change']
					}, {
						pattern: /^(0|[1-9]\d*(\.\d{1,2})?)$/,
						transform(value) {
							return String(value);
						},
						message: '输入错误：最大两位小数的数字',
						trigger: ['blur', 'change']
					}],
					stock: [{
						type: 'string',
						required: true,
						message: '请输入商品库存',
						trigger: ['blur', 'change']
					}, {
						pattern: /^[1-9]\d*$/,
						transform(value) {
							return String(value);
						},
						message: '输入错误：请输入一个正整数',
						trigger: ['blur', 'change']
					}],
					goodName: [{
						type: 'string',
						required: true,
						message: '请选择商品分类',
						trigger: ['blur', 'change']
					}]
				},
				limitedData: {
					goodsCountLimit: false, //  false=商品不限购 true=商品限购
					goodsSingle: false, //  false=每人不限购 true=每人限购
					goodsDay: false, //  false=每人每天商品不限购 true=每人每天商品限购
				},
				params: {
					id: 0,
					goodsName: '', // 商品名称 正则2-15个字符
					goodsAmount: '', // 商品单价 正则包含0的数值
					stock: '', // 商品库存 正则大于0的数值
					goodsType: '', // 1.团长 2.商品粮油
					goodName: '', // 商品分类name
					goodsUrl: '', // 商品图片 至少传一张
					isRestrictions: 0, // 0=不限购 1=限购
					goodsCountLimit: '', // 总限购  正则大于0的数值
					goodsSingle: '', // 每人限购  正则大于0的数值
					goodsDay: '', // 每人每天限购  正则大于0的数值
				},
				sortList: [{ name: '团长推荐', id: 1 }, { name: '粮油调味', id: 2 }]
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(options) {
			console.log('options', options)
			if (options.id) this.postGetTeamTeaderGoodsInfo(options.id)
		},
		methods: {
			// 商品详情
			async postGetTeamTeaderGoodsInfo(id) {
				let { params, sortList, limitedData } = this
				const { code, data } = await GetTeamTeaderGoodsInfo({ goodsId: id })
				if (code == '200') {
					for (let items in params) {
						params[items] = data[items]
					}
					data.goodsUrl.split(',').map((res) => {
						this.fileList.push({ url: res })
					})
					// if (data.isRestrictions * 1) {
					for (let i in limitedData) {
						if (data[i]*1) limitedData[i] = true
						params[i] = params[i] * 1 || ''
					}
					// }
					console.log(params, data)
					this.sortIndex = data.goodsType * 1 - 1
					params.goodsAmount = params.goodsAmount + ''
					params.stock = params.stock + ''
					params.goodName = sortList[data.goodsType * 1 - 1].name
					this.params = params
				}
			},
			// 添加成功
			async postAddGoodsInfo() {
				this.disabled = true
				const { code, data } = await AddGoodsInfo(this.params)
				if (code == '200') {
					uni.$u.toast('操作成功', 900)
					setTimeout(() => {
						uni.navigateBack({})
					}, 1000)
				} else this.disabled = false
			},
			onProcessing(name) {
				this.limitedData[name] = this.limitedData[name] == 0 ? 1 : 0
			},
			// 上传图片
			async afterRead(e) {
				const url = await MultipassUpload(e.file, 3, this.fileList)
				this.fileList = url
				console.log('this.fileList', this.fileList)
			},
			// 删除
			onDeletePicImg({ index }) {
				console.log('index', index)
				this.fileList.splice(index, 1)
			},
			// 选择商品分类
			onSortSelect(e) {
				let { value } = e.detail
				const { sortList } = this
				console.log(value)
				this.sortIndex = value
				this.params.goodsType = sortList[value].id
				this.params.goodName = sortList[value].name
				this.$refs.uForm.clearValidate('goodName');
			},
			// 处理数据验证
			validation() {
				const { params, limitedData } = this
				console.log('params', params)
				let tis = ''
				if (!this.fileList.length) {
					uni.$u.toast('商品图片 至少上传一张', 2000)
					return
				} else {
					let imgs = []
					this.fileList.map(res => {
						imgs.push(res.url)
					})
					this.params.goodsUrl = imgs.join(',')
				}
				if (params.isRestrictions == 1) {
					let listData = []
					for (let i in limitedData) {
						console.log(limitedData[i], i)
						if (limitedData[i]) {
							listData.push(i)
							// params[i] = limitedData[i]
							console.log('params[i]', params[i])
							if (!/^[1-9]\d*$/.test(params[i]) && params[i]) tis = "输入错误：请输入一个正整数"
						} else params[i] = ''
					}
					if (!listData.length) tis = "限购信息需至少选择一项"
					if (listData.length == 1 && !params[listData[0]]) tis = "限购信息请输入限购数量"
				}
				if (tis) {
					uni.$u.toast(tis, 2000)
					return
				}
				this.postAddGoodsInfo()
				console.log(params)
			},
			// 提交验证数据
			onSubmit() {
				const _this = this
				_this.borderErr = false
				this.$refs.uForm.validate().then(res => {
					_this.validation()
				}).catch(errors => {
					// uni.$u.toast('校验失败')
					_this.borderErr = true
				})
			},
		}
	}
</script>

<style lang="scss">
	.AddProduct {
		padding: 0 20rpx 200rpx;

		.icon-right-1-copy {
			margin-right: 12rpx;
		}

		.title {
			padding: 36rpx 0 28rpx;
		}

		.save {
			z-index: 10;

			.save-inset {
				height: 168rpx;
			}
		}

		// 输入部分
		.input {
			padding-left: 28rpx;

			.building-plac {
				color: #BCBCBC;
			}

			.u-input__content__field-wrapper__field {
				height: 120rpx !important;
				border-bottom: 1px solid #F0F0F0;
			}

			.u-form-item__body__left__content__label,
			.u-input__content__field-wrapper__field {
				font-size: 32rpx !important;
			}
		}

		.limited {
			padding-left: 28rpx;

			.limited-controls {
				padding: 40rpx 0;

				.controls {
					margin-right: 104rpx;
				}
			}

			.icon-danxuanweixuanzhong,
			.icon-xuanze,
			.class-xuanze {
				color: #BEBEBE;
			}

			.controls-goods {
				padding: 40rpx 0;
				display: grid;
				grid-gap: 40rpx;
			}

			.limited-input {
				width: 120rpx;
				height: 50rpx;
				text-align: center;
				border-radius: 6rpx;
				margin: 0 12rpx;
				border: 1px solid #E0E4E9;
			}
		}

		// 上传
		::v-deep.product-picture {
			padding: 36rpx 32rpx;

			.upload-img {
				width: 130rpx;
				height: 130rpx;
				border-radius: 18rpx
			}

			.u-upload__wrap__preview {
				margin: 0 !important;
				width: 130rpx;
				height: 130rpx;
			}

			.u-upload__wrap {
				display: grid;
				grid-template-columns: repeat(4, 130rpx);
				grid-gap: 32rpx;

				.u-upload__wrap__preview__image {
					width: 100% !important;
					height: 100% !important;
					border-radius: 18rpx;
				}
			}
		}

	}
</style>